<template>
  <div class="chart-container">
    <!-- 饼图容器 -->
    <div ref="chartRef" style="width: 100%; height: 553px"></div>

    <el-drawer
      :title="selectedCountry"
      :visible.sync="showSidebar"
      direction="rtl"
      :before-close="handleClose"
    >
    </el-drawer>
  </div>
</template>

<script>
import service from "@/service/service";

export default {
  name: "PieChart",
  data() {
    return {
      selectedCountry: null,
      showSidebar: false,
      myChart: null, // 图表实例
      chartData: [],
      allCountryCoordinates: {
        阿富汗: { latitude: 34.5322, longitude: 69.1657 }, // 喀布尔
        阿尔巴尼亚: { latitude: 41.3275, longitude: 19.8189 }, // 地拉那
        阿尔及利亚: { latitude: 36.7525, longitude: 3.042 }, // 阿尔及尔
        阿根廷: { latitude: -34.6037, longitude: -58.3816 }, // 布宜诺斯艾利斯
        阿拉伯联合酋长国: { latitude: 25.276987, longitude: 55.296249 }, // 阿布扎比
        阿曼: { latitude: 23.6102, longitude: 58.5449 }, // 马斯喀特
        阿塞拜疆: { latitude: 40.3754, longitude: 49.8429 }, // 巴库
        埃及: { latitude: 30.0444, longitude: 31.2357 }, // 开罗
        埃塞俄比亚: { latitude: 9.0054, longitude: 38.7636 }, // 亚的斯亚贝巴
        爱尔兰: { latitude: 53.3498, longitude: -6.2603 }, // 都柏林
        爱沙尼亚: { latitude: 59.437, longitude: 24.7536 }, // 塔林
        安道尔: { latitude: 42.5063, longitude: 1.5218 }, // 安道尔城
        安哥拉: { latitude: -8.8383, longitude: 13.2344 }, // 罗安达
        安提瓜和巴布达: { latitude: 17.0636, longitude: -61.8451 }, // 圣约翰
        奥地利: { latitude: 48.2082, longitude: 16.3738 }, // 维也纳
        澳大利亚: { latitude: -35.2809, longitude: 149.13 }, // 堪培拉
        巴巴多斯: { latitude: 13.1939, longitude: -59.5432 }, // 布里奇顿
        巴哈马: { latitude: 25.0343, longitude: -77.3963 }, // 拿骚
        巴基斯坦: { latitude: 33.6844, longitude: 73.0479 }, // 伊斯兰堡
        巴拉圭: { latitude: -25.2637, longitude: -57.5759 }, // 亚松森
        巴林: { latitude: 26.2389, longitude: 50.5877 }, // 麦纳麦
        巴拿马: { latitude: 8.9824, longitude: -79.5199 }, // 巴拿马城
        巴西: { latitude: -15.7801, longitude: -47.9292 }, // 巴西利亚
        白俄罗斯: { latitude: 53.9045, longitude: 27.5615 }, // 明斯克
        保加利亚: { latitude: 42.6977, longitude: 23.3219 }, // 索非亚
        北马其顿: { latitude: 41.9973, longitude: 21.428 }, // 斯科普里
        贝宁: { latitude: 6.4964, longitude: 2.6036 }, // 波多诺伏
        比利时: { latitude: 50.8503, longitude: 4.3517 }, // 布鲁塞尔
        冰岛: { latitude: 64.1265, longitude: -21.8174 }, // 雷克雅未克
        波兰: { latitude: 52.2297, longitude: 21.0122 }, // 华沙
        波斯尼亚和黑塞哥维那: { latitude: 43.8563, longitude: 18.4131 }, // 萨拉热窝
        玻利维亚: { latitude: -16.5, longitude: -68.15 }, // 苏克雷（法定首都）
        布基纳法索: { latitude: 12.3657, longitude: -1.5339 }, // 瓦加杜古
        布隆迪: { latitude: -3.3731, longitude: 29.3114 }, // 布琼布拉
        朝鲜: { latitude: 39.0392, longitude: 125.7543 }, // 平壤
        丹麦: { latitude: 55.6761, longitude: 12.5683 }, // 哥本哈根
        德国: { latitude: 52.52, longitude: 13.405 }, // 柏林
        东帝汶: { latitude: -8.55, longitude: 125.5167 }, // 帝力
        多哥: { latitude: 6.1304, longitude: 1.2247 }, // 洛美
        多米尼加共和国: { latitude: 18.4727, longitude: -69.9405 }, // 圣多明各
        多米尼克: { latitude: 15.307, longitude: -61.3811 }, // 罗索
        俄罗斯: { latitude: 55.7558, longitude: 37.6176 }, // 莫斯科
        厄瓜多尔: { latitude: -0.1807, longitude: -78.4678 }, // 基多
        厄立特里亚: { latitude: 15.338, longitude: 38.9318 }, // 阿斯马拉
        法国: { latitude: 48.8566, longitude: 2.3522 }, // 巴黎
        菲律宾: { latitude: 14.5995, longitude: 120.9842 }, // 马尼拉
        斐济: { latitude: -18.1416, longitude: 178.4419 }, // 苏瓦
        芬兰: { latitude: 60.1699, longitude: 24.9384 }, // 赫尔辛基
        哥伦比亚: { latitude: 4.711, longitude: -74.0721 }, // 波哥大
        哥斯达黎加: { latitude: 9.9281, longitude: -84.0907 }, // 圣何塞
        格林纳达: { latitude: 12.0564, longitude: -61.7485 }, // 圣乔治
        格鲁吉亚: { latitude: 41.7151, longitude: 44.8271 }, // 第比利斯
        古巴: { latitude: 23.1136, longitude: -82.3666 }, // 哈瓦那
        危地马拉: { latitude: 14.6349, longitude: -90.5069 }, // 危地马拉城
        几内亚: { latitude: 9.9459, longitude: -13.749 }, // 科纳克里
        几内亚比绍: { latitude: 11.8588, longitude: -15.579 }, // 比绍
        加纳: { latitude: 5.5598, longitude: -0.2038 }, // 阿克拉
        加蓬: { latitude: -0.3807, longitude: 9.4544 }, // 利伯维尔
        加拿大: { latitude: 45.4215, longitude: -75.6972 }, // 渥太华
        柬埔寨: { latitude: 11.5564, longitude: 104.9282 }, // 金边
        捷克: { latitude: 50.0755, longitude: 14.4378 }, // 布拉格
        津巴布韦: { latitude: -17.8249, longitude: 31.0531 }, // 哈拉雷
        喀麦隆: { latitude: 3.8667, longitude: 11.5167 }, // 雅温得
        卡塔尔: { latitude: 25.2867, longitude: 51.5333 }, // 多哈
        科摩罗: { latitude: -11.6455, longitude: 43.3333 }, // 莫罗尼
        科特迪瓦: { latitude: 5.3451, longitude: -4.0245 }, // 亚穆苏克罗（政治首都）
        科威特: { latitude: 29.3759, longitude: 47.9774 }, // 科威特城
        克罗地亚: { latitude: 45.815, longitude: 15.9819 }, // 萨格勒布
        肯尼亚: { latitude: -1.2864, longitude: 36.8172 }, // 内罗毕
        老挝: { latitude: 18.7871, longitude: 102.4955 }, // 万象
        黎巴嫩: { latitude: 33.8938, longitude: 35.5018 }, // 贝鲁特
        立陶宛: { latitude: 54.6872, longitude: 25.2797 }, // 维尔纽斯
        利比里亚: { latitude: 6.3, longitude: -10.7997 }, // 蒙罗维亚
        利比亚: { latitude: 32.8872, longitude: 13.1913 }, // 的黎波里
        列支敦士登: { latitude: 47.141, longitude: 9.5218 }, // 瓦杜兹
        卢森堡: { latitude: 49.6117, longitude: 6.1319 }, // 卢森堡市
        卢旺达: { latitude: -1.9403, longitude: 30.0619 }, // 基加利
        罗马尼亚: { latitude: 44.4268, longitude: 26.1025 }, // 布加勒斯特
        马达加斯加: { latitude: -18.8792, longitude: 47.5079 }, // 塔那那利佛
        马尔代夫: { latitude: 4.1755, longitude: 73.5092 }, // 马累
        马耳他: { latitude: 35.8989, longitude: 14.5146 }, // 瓦莱塔
        马拉维: { latitude: -13.9626, longitude: 33.7741 }, // 利隆圭
        马来西亚: { latitude: 3.139, longitude: 101.6869 }, // 吉隆坡
        马里: { latitude: 12.6317, longitude: -8.0083 }, // 巴马科
        马绍尔群岛: { latitude: 7.1315, longitude: 171.1845 }, // 马朱罗
        毛里塔尼亚: { latitude: 18.0653, longitude: -15.9785 }, // 努瓦克肖特
        毛里求斯: { latitude: -20.1614, longitude: 57.5079 }, // 路易港
        美国: { latitude: 38.9072, longitude: -77.0369 }, // 华盛顿
        蒙古: { latitude: 47.8864, longitude: 106.9057 }, // 乌兰巴托
        孟加拉国: { latitude: 23.8103, longitude: 90.4125 }, // 达卡
        密克罗尼西亚: { latitude: 7.4256, longitude: 150.5508 }, // 帕利基尔
        缅甸: { latitude: 19.7633, longitude: 96.0785 }, // 内比都
        摩尔多瓦: { latitude: 47.0105, longitude: 28.8638 }, // 基希讷乌
        摩洛哥: { latitude: 33.9716, longitude: -6.8498 }, // 拉巴特
        摩纳哥: { latitude: 43.7384, longitude: 7.4246 }, // 摩纳哥城
        莫桑比克: { latitude: -25.9652, longitude: 32.5892 }, // 马普托
        墨西哥: { latitude: 19.4326, longitude: -99.1332 }, // 墨西哥城
        纳米比亚: { latitude: -22.5684, longitude: 17.0839 }, // 温得和克
        瑙鲁: { latitude: -0.5228, longitude: 166.9317 }, // 亚伦
        尼泊尔: { latitude: 27.7172, longitude: 85.324 }, // 加德满都
        尼加拉瓜: { latitude: 12.1358, longitude: -86.2519 }, // 马那瓜
        尼日尔: { latitude: 13.5137, longitude: 2.1098 }, // 尼亚美
        尼日利亚: { latitude: 9.0579, longitude: 7.4951 }, // 阿布贾
        挪威: { latitude: 59.9139, longitude: 10.7522 }, // 奥斯陆
        葡萄牙: { latitude: 38.7223, longitude: -9.1393 }, // 里斯本
        日本: { latitude: 35.6895, longitude: 139.6917 }, // 东京
        瑞典: { latitude: 59.3293, longitude: 18.0686 }, // 斯德哥尔摩
        瑞士: { latitude: 46.2044, longitude: 6.1432 }, // 伯尔尼
        萨尔瓦多: { latitude: 13.6929, longitude: -89.2182 }, // 圣萨尔瓦多
        萨摩亚: { latitude: -13.8333, longitude: -171.7667 }, // 阿皮亚
        塞尔维亚: { latitude: 44.817, longitude: 20.4586 }, // 贝尔格莱德
        塞拉利昂: { latitude: 8.4606, longitude: -13.2317 }, // 弗里敦
        塞内加尔: { latitude: 14.6928, longitude: -17.4467 }, // 达喀尔
        塞浦路斯: { latitude: 35.1856, longitude: 33.3823 }, // 尼科西亚
        塞舌尔: { latitude: -4.6195, longitude: 55.451 }, // 维多利亚
        沙特阿拉伯: { latitude: 24.7136, longitude: 46.6753 }, // 利雅得
        圣多美和普林西比: { latitude: 0.3368, longitude: 6.7416 }, // 圣多美
        圣基茨和尼维斯: { latitude: 17.3578, longitude: -62.7821 }, // 巴斯特尔
        圣卢西亚: { latitude: 13.9918, longitude: -60.9785 }, // 卡斯特里
        圣马力诺: { latitude: 43.9424, longitude: 12.4578 }, // 圣马力诺市
        圣文森特和格林纳丁斯: { latitude: 13.1644, longitude: -61.2243 }, // 金斯敦
        斯里兰卡: { latitude: 6.9271, longitude: 79.8612 }, // 科伦坡
        斯洛伐克: { latitude: 48.1486, longitude: 17.1077 }, // 布拉迪斯拉发
        斯洛文尼亚: { latitude: 46.0569, longitude: 14.5058 }, // 卢布尔雅那
        苏丹: { latitude: 15.5007, longitude: 32.5599 }, // 喀土穆
        苏里南: { latitude: 5.852, longitude: -55.1668 }, // 帕拉马里博
        所罗门群岛: { latitude: -9.4333, longitude: 159.95 }, // 霍尼亚拉
        索马里: { latitude: 2.0469, longitude: 45.3182 }, // 摩加迪沙
        塔吉克斯坦: { latitude: 38.5549, longitude: 68.7775 }, // 杜尚别
        泰国: { latitude: 13.7563, longitude: 100.5018 }, // 曼谷
        坦桑尼亚: { latitude: -6.7924, longitude: 39.2083 }, // 多多马（政治首都）
        汤加: { latitude: -21.1351, longitude: -175.2046 }, // 努库阿洛法
        特立尼达和多巴哥: { latitude: 10.6918, longitude: -61.2225 }, // 西班牙港
        突尼斯: { latitude: 36.8065, longitude: 10.1815 }, // 突尼斯市
        图瓦卢: { latitude: -8.5167, longitude: 179.1942 }, // 富纳富提
        土耳其: { latitude: 41.0082, longitude: 28.9784 }, // 安卡拉
        土库曼斯坦: { latitude: 37.9689, longitude: 58.3698 }, // 阿什哈巴德
        瓦努阿图: { latitude: -17.7397, longitude: 168.3292 }, // 维拉港
        委内瑞拉: { latitude: 10.488, longitude: -66.8792 }, // 加拉加斯
        文莱: { latitude: 4.9031, longitude: 114.9398 }, // 斯里巴加湾市
        乌干达: { latitude: 0.3476, longitude: 32.5825 }, // 坎帕拉
        乌克兰: { latitude: 50.4501, longitude: 30.5234 }, // 基辅
        乌拉圭: { latitude: -34.9011, longitude: -56.1645 }, // 蒙得维的亚
        乌兹别克斯坦: { latitude: 41.2646, longitude: 69.2163 }, // 塔什干
        西班牙: { latitude: 40.4168, longitude: -3.7038 }, // 马德里
        希腊: { latitude: 37.9838, longitude: 23.7275 }, // 雅典
        新加坡: { latitude: 1.3521, longitude: 103.8198 }, // 新加坡市
        新西兰: { latitude: -41.2768, longitude: 174.7772 }, // 惠灵顿
        匈牙利: { latitude: 47.4979, longitude: 19.0402 }, // 布达佩斯
        叙利亚: { latitude: 33.5138, longitude: 36.2765 }, // 大马士革
        牙买加: { latitude: 18.0179, longitude: -76.8099 }, // 金斯敦
        亚美尼亚: { latitude: 40.1811, longitude: 44.5136 }, // 埃里温
        也门: { latitude: 15.3547, longitude: 44.2065 }, // 萨那
        伊拉克: { latitude: 33.3152, longitude: 44.3661 }, // 巴格达
        伊朗: { latitude: 35.6892, longitude: 51.389 }, // 德黑兰
        以色列: { latitude: 31.7683, longitude: 35.2137 }, // 耶路撒冷（争议首都，实际行政中心）
        意大利: { latitude: 41.9028, longitude: 12.4964 }, // 罗马
        印度: { latitude: 28.6139, longitude: 77.209 }, // 新德里
        印度尼西亚: { latitude: -6.2088, longitude: 106.8456 }, // 雅加达
        英国: { latitude: 51.5074, longitude: -0.1278 }, // 伦敦
        约旦: { latitude: 31.9588, longitude: 35.9434 }, // 安曼
        越南: { latitude: 21.0278, longitude: 105.8342 }, // 河内
        赞比亚: { latitude: -15.3875, longitude: 28.3228 }, // 卢萨卡
        乍得: { latitude: 12.134, longitude: 15.0579 }, // 恩贾梅纳
        智利: { latitude: -33.4489, longitude: -70.6693 }, // 圣地亚哥
        中国: { latitude: 39.9042, longitude: 116.4074 }, // 北京
      },
    };
  },
  mounted() {
    this.handhotAreaList();

    // 监听窗口大小变化，自适应图表
    window.addEventListener("resize", this.handleResize);
  },
  beforeDestroy() {
    // 销毁图表实例，释放资源
    if (this.myChart) {
      this.myChart.dispose();
    }
    // 移除事件监听
    window.removeEventListener("resize", this.handleResize);
  },
  methods: {
    // 活跃地区

    async handhotAreaList() {
      const res = await service({
        url: "/frontend/index/hotAreaList",
        method: "get",
      });
      if (res.code === 200) {
        console.log(res, "111");
        this.chartData = res.data.map((item) => ({
          ...item,
          resourceNum: item.resourceNum,
        }));

        // 初始化图表
        this.initChart();
      } else {
        this.$message.error(res.msg || "数据获取失败");
      }
    },

    mapAllCountries(countryList, coordinatesMap) {
      return countryList.map((item) => {
        const coords = coordinatesMap[item.country];
        return {
          name: item.resourceNum ? item.country : "",
          names: item.country,
          value: [coords.longitude, coords.latitude],
          resourceNum: item.resourceNum,
        };
      });
    },

    createMoveLines(countryList, coordinatesMap) {
      // 首先过滤出中国
      const china = countryList.find((item) => item.country === "中国");
      if (!china) return []; // 如果没有中国，返回空数组

      // 过滤掉中国，获取其他国家，同时过滤掉没有resourceNum的国家
      const otherCountries = countryList.filter(
        (item) => item.country !== "中国" && item.resourceNum
      );

      // 为每个国家创建与中国（北京）的连线
      return otherCountries.map((country) => ({
        fromName: "中国",
        toName: country.country,
        coords: [
          [
            coordinatesMap[country.country].longitude,
            coordinatesMap[country.country].latitude,
          ],
          [coordinatesMap["中国"].longitude, coordinatesMap["中国"].latitude],
        ],
      }));
    },

    handleClose(done) {
      done();
    },
    initChart() {
      // 获取DOM元素并初始化图表
      this.myChart = this.$echarts.init(this.$refs.chartRef);

      var allData = {
        citys: this.mapAllCountries(this.chartData, this.allCountryCoordinates),
        moveLines: this.createMoveLines(
          this.chartData,
          this.allCountryCoordinates
        ),
      };
      var cityData = [{ name: "", value: [116.4074, 39.9042] }];
      // 设置图表配置项
      const option = {
        backgroundColor: "rgb(2,30,52)",

        tooltip: {
          trigger: "item",
          formatter: (params) => {
            if (params.seriesType === "effectScatter") {
              return `${params.data.names}<br/>数据量：${
                params.data.resourceNum || 0
              }条`;
            }
            return params.names;
          },
        },

        grid: {
          right: "8%",
          // top:'5%'
        },
        geo: {
          map: "world",
          aspectScale: 0.65, //长宽比
          zoom: 1.12,

          scaleLimit: {
            min: 1,
            max: 5,
          },
          label: {
            show: !1,
          },
          roam: false,
          itemStyle: {
            normal: {
              shadowColor: "#164A7C",
              shadowOffsetX: 5,
              shadowOffsetY: 5,
            },
          },
        },
        // tooltip: {
        //   trigger: "item",
        // },
        // zlevel: 999,

        series: [
          {
            type: "map",
            roam: false,
            label: {
              show: !1,
            },
            tooltip: {
              show: !1,
            },
            itemStyle: {
              normal: {
                borderColor: "#3EC3E3",
                borderWidth: 0.2,
                areaColor: {
                  type: "radial",
                  x: 0.5,
                  y: 0.5,
                  r: 0.8,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#1867B5", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "#1867B5", // 100% 处的颜色
                    },
                  ],
                  globalCoord: true, // 缺省为 false
                },
              },
              emphasis: {
                label: {
                  // show: !1,
                  color: "#fff",
                },
                areaColor: "#0E83B7",
                //    shadowColor: 'rgb(12,25,50)',
                borderWidth: 0.2,
              },
            },
            aspectScale: 0.65, //长宽比
            zoom: 1.12,
            //     roam: false,
            map: "world", //使用
            // data: this.difficultData //热力图数据   不同区域 不同的底色
          },
          {
            name: "地点",
            type: "scatter",
            coordinateSystem: "geo",
            zlevel: 2,
            rippleEffect: {
              period: 1,
              brushType: "stroke",
              scale: 8,
            },
            label: {
              normal: {
                show: true,
                position: "right",
                color: "#9966cc",
                formatter: "{b}",
                textStyle: {
                  color: "#fff",
                },
              },
              emphasis: {
                show: true,
              },
            },
            symbol: "pin",
            symbolSize: 20,
            itemStyle: {
              normal: {
                show: true,
                color: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#F65857", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "#EC2624", // 100% 处的颜色
                    },
                  ],
                },
              },
            },
            data: cityData,
          },
          {
            type: "effectScatter",
            coordinateSystem: "geo",
            zlevel: 2,
            rippleEffect: {
              //涟漪特效
              period: 15, //动画时间，值越小速度越快
              brushType: "stroke", //波纹绘制方式 stroke, fill
              scale: 2, //波纹圆环最大限制，值越大波纹越大
            },
            label: {
              normal: {
                show: true, //从 false 改为 true（显示国家名字）
                position: "right", //显示位置
                offset: [5, 0], //偏移设置
                formatter: "{b}", //圆环显示文字
                textStyle: {
                  color: "rgb(214,206,143)",
                },
              },
            },
            emphasis: {
              show: true,
              scale: !0,
              label: {
                show: true,
                backgroundColor: "#000",
                padding: 2,
                borderRadius: 2,
                color: "#fff",
              },
            },
            symbol: "circle",
            symbolSize: "6",

            itemStyle: {
              normal: {
                show: false,
                color: "#0FD1D9",
              },
            },
            data: allData.citys,
          },
          {
            name: "线路",
            type: "lines",
            coordinateSystem: "geo",
            zlevel: 2,
            large: true,
            //   zlevel: 2,
            effect: {
              show: true,
              period: 10, //箭头指向速度，值越小速度越快
              trailLength: 0.1, //特效尾迹长度[0,1]值越大，尾迹越长重
              symbol: "arrow", //箭头图标
              symbolSize: 7, //图标大小
            },
            lineStyle: {
              normal: {
                color: "#0FD1D9",
                // 线条宽度
                width: 0.2,
                opacity: 1,
                curveness: 0.3,
              },
            },
            label: {
              normal: {
                show: false,
                position: "middle",
                formatter: "{b}",
              },
            },
            data: allData.moveLines,
          },
        ],
      };
      // 设置配置项到图表
      this.myChart.setOption(option);
      // 添加点击事件
      this.myChart.on("click", (params) => {
        if (params.componentType === "series") {
          //   console.log("点击时间");

          //   this.selectedCountry = params.name;
          //   this.showSidebar = true;
          this.$router.push({
            path: "/SearchPage?selectedCountry=" + params.name,
          });
          this.homeContainer = document.querySelector(".home");
          if (!this.homeContainer) return;
          this.homeContainer.scrollTo({
            top: 0,
            behavior: "smooth",
          });
        }
      });
    },
    // 处理窗口大小变化，让图表自适应
    handleResize() {
      if (this.myChart) {
        this.myChart.resize();
      }
    },
  },
};
</script>

<style scoped>
.chart-container {
  width: 100%;
  height: 556px;
}

.chart {
  width: 100%;
  height: 100%;
}
</style>
